<template>
  <div>
    <span>用户名：</span>
    <span>
      <input type="text" v-model.lazy='uname'>
    </span>
    <span>{{ tip }}</span>
  </div>
</template>

<script>
export default {
  name: "TestWatch",
  data() {
    return {
      uname: '',
      tip: ''
    }
  },
  methods: {
    checkName: function (uname) {
      // 调用接口
      // 这里使用定时任务的方式模拟接口调用
      // setTimeout（）中的this是window对象，所以需要在外面定义一个that来接收vue的data
      let that = this;
      console.log('1');
      // setTimeout本身是个异步的方法
      setTimeout(function () {
        // 模拟接口调用
        console.log('3');
        if (uname === 'admin') {
          that.tip = '用户名已经存在，请更换一个';
        } else {
          that.tip = '用户名可以使用';
        }
      }, 2000);
    }
  },
  watch: {
    uname: function (val) {
      // 调用后台接口验证用户名的合法性
      this.checkName(val);
      // 修改提示信息
      console.log('2');
      this.tip = '正在验证...';
    }
  }
}
</script>

<style scoped>

</style>
